<template>
  <el-dialog
    v-model="cancelTaskDialog"
    :title="cancelTaskTitle"
    width="800px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item :label="cancelTaskTitle + '原因'" prop="cancelTaskRason">
        <el-input v-model="form.cancelTaskRason" />
      </el-form-item>
      <el-form-item label="上传证件" prop="cancelTaskPic">
        <el-upload
          :file-list="form.cancelTaskPic"
          :multiple="true"
          class="avatar-uploader"
          action="https://api.sanjianke.com/common/Upload/upload?file=OrderAttach&type=image"
          list-type="picture-card"
          accept="image/png, image/jpeg"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="cancelTaskOk">确 定</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  <div>
    <div style="padding-bottom: 10px">
      <el-button
        v-for="(item, index) in AssignOrderBtns"
        :key="index"
        type="primary"
        plain
        style="margin: 10px; margin-top: 5px"
        @click="doAssignOrder(item)"
      >
        {{ item.AssignOrderTargetName }}
      </el-button>
    </div>
    <div style="padding-bottom: 10px">
      <el-table
        v-loading="listLoading"
        :data="WorkTasks"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          label="任务ID"
          prop="WorkTaskID"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column align="center" label="派单人" width="80">
          <template #default="{ row }">{{ row.AssignStaffName }}</template>
        </el-table-column>
        <el-table-column align="center" label="分单目标" width="130">
          <template #default="{ row }">{{ row.TaskTargetName }}</template>
        </el-table-column>
        <el-table-column align="center" label="指派接单人" width="100">
          <template #default="{ row }">{{ row.TaskStaffName }}</template>
        </el-table-column>
        <el-table-column align="center" label="派单时间" width="180">
          <template #default="{ row }">{{ row.AddTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="任务" width="120">
          <template #default="{ row }">{{ row.ProductName }}</template>
        </el-table-column>
        <el-table-column align="center" label="指定店铺/账号">
          <template #default="{ row }">{{ row.BindStoreAccount }}</template>
        </el-table-column>
        <el-table-column align="center" label="接单状态" width="100">
          <template #default="{ row }">
            <el-text v-if="row.TaskState == 0" type="danger">待接单</el-text>
            <el-text v-if="row.TaskState == 1" type="primary">已接单</el-text>
            <el-text v-if="row.TaskState == 2" type="warning">待审核</el-text>
            <el-text v-if="row.TaskState == 3" type="success">已审核</el-text>
            <el-text v-if="row.TaskState == -2" type="warning">已更换</el-text>
          </template>
        </el-table-column>
        <el-table-column align="center" label="业绩审核状态" width="120">
          <template #default="{ row }">
            <el-text v-if="row.SubmitCheckState == -2" type="danger" />
            <el-text v-if="row.SubmitCheckState == -1" type="danger">
              有未审核
            </el-text>
            <el-text v-if="row.SubmitCheckState == 0" type="warning">
              待审核
            </el-text>
            <el-text v-if="row.SubmitCheckState == 1" type="success">
              已通过
            </el-text>
          </template>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="180">
          <template #default="{ row }">
            <div v-if="userInfo.StaffID != row.TaskStaffID" style="float: left">
              <el-button
                v-if="row.isList"
                type="success"
                size="small"
                @click="doAssignTaskList(row)"
              >
                任务清单
              </el-button>
              <el-button
                v-else
                type="success"
                size="small"
                :disabled="row.TaskState != 0"
                @click="doAssignTaskList(row)"
              >
                修改
              </el-button>

              <el-button
                v-if="
                  row.TaskState == 0 && userInfo.StaffID == row.AssignStaffID
                "
                type="danger"
                size="small"
                @click="cancelTaskList(row, 0)"
              >
                取消分单
              </el-button>
            </div>
            <div
              v-if="
                actstaffpostid == 2 ||
                actstaffpostid == 3 ||
                actstaffpostid == 6 ||
                actstaffpostid == 10 ||
                actstaffpostid == 18
              "
              style="float: left; margin-left: 10px"
            >
              <el-button v-if="row.state == -1" type="info" size="small">
                已作废
              </el-button>
              <el-button
                v-else
                type="danger"
                size="small"
                @click="cancelTaskList(row, -1)"
              >
                作废
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <assign-order ref="assignRef" @fetch-data="TriggerUp" />
    <!-- <assign-operate ref="assignOperateRef" />
    <assign-designer ref="assignDesignerRef" />
    <assign-videoer ref="assignVideoerRef" />
    <assign-zonghe ref="assignZongheRef" /> -->
  </div>
</template>

<script>
  import { getAssignOrderBtns, cancelWorkTask } from '@/api/worktask'
  import AssignOrder from '@/views/business/components/AssignOrder'

  // import AssignOperate from '@/views/business/components/AssignOperate'
  // import AssignDesigner from '@/views/business/components/AssignDesigner'
  // import AssignVideoer from '@/views/business/components/AssignVideoer'
  // import AssignZonghe from '@/views/business/components/AssignZonghe'

  export default defineComponent({
    name: 'OperateAssign',
    components: {
      AssignOrder,
      // AssignOperate,
      // AssignDesigner,
      // AssignVideoer,
      // AssignZonghe,
    },
    props: {
      actstffpostid: {
        type: Number,
        default: 0,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      // const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const { fetchData } = inject('rootMethods')

      const state = reactive({
        TaskSetState: 0,
        GiftList: [],
        userInfo: {},
        OrderInfo: {},
        OrderID: 0,
        listLoading: false,
        assignRef: null,
        assignDesignerRef: null,
        assignVideoerRef: null,
        assignZongheRef: null,
        ProductList: [],
        StoreList: [],
        WorkTasks: [],
        AssignOrderBtns: [],
        WorktaskInfo: {},
        actstaffpostid: 0,
        cancelTaskDialog: false,
        cancelTaskTitle: '',
        cancelTaskID: 0,
        cancelTaskType: 0,
        formRef: null,
        form: {
          cancelTaskPic: [],
        },
        dialogImageUrl: '',
        dialogVisible: false,
      })

      const showList = (OrderInfo, WorkTasks, WorktaskInfo, GiftList) => {
        state.TaskSetState = WorktaskInfo.OrderList.TaskSetState
        state.OrderInfo = OrderInfo
        state.OrderID = OrderInfo.OrderID
        state.GiftList = GiftList
        getAssignOrderBtn()
        state.WorkTasks = WorkTasks
        state.WorktaskInfo = WorktaskInfo
        state.ProductList = []
        state.ProductList.push(WorktaskInfo.OrderList)
      }

      // const cancelTaskList = async (row) => {
      //   const { msg } = await cancelWorkTask({
      //     WorkTaskID: row.WorkTaskID,
      //     state: 0,
      //   })
      //   $baseMessage(msg, 'success', 'vab-hey-message-success')
      //   fetchData()
      // }
      const cancelTaskList = async (row, t) => {
        if (t) {
          state.cancelTaskTitle = '作废'
        } else {
          state.cancelTaskTitle = '取消'
        }
        state.cancelTaskID = row.WorkTaskID
        state.cancelTaskType = t
        state.cancelTaskDialog = true
      }
      const cancelTaskOk = async () => {
        const { msg } = await cancelWorkTask({
          WorkTaskID: state.cancelTaskID,
          state: state.cancelTaskType,
          cancelTaskRason: state.form.cancelTaskRason,
          cancelTaskPic: state.form.cancelTaskPic,
        })
        $baseMessage(msg, 'success', 'vab-hey-message-success')
        close()
        // emit('fetch-data')
        fetchData()
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {}
        state.cancelTaskDialog = false
      }
      // 触发上级
      const TriggerUp = () => {
        emit('fetch-data')
      }
      const handleRemove = (uploadFile, uploadFiles) => {
        console.log(uploadFile, uploadFiles)
        console.log(state.form, '12312312')
      }

      const handleAvatarSuccess = (response) => {
        const data = {
          url: response.data.url,
        }
        state.form.cancelTaskPic.push(data)
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        console.log(state.form.cancelTaskPic, '  state.cancelTaskPic')
      }

      const handlePictureCardPreview = (uploadFile) => {
        console.log(uploadFile, 'uploadFile')
        state.dialogImageUrl = uploadFile.url
        state.dialogVisible = true
      }
      const doAssignOrder = (item) => {
        console.log('state.ProductList', state.ProductList)

        state.assignRef.showEdit(
          state.OrderID,
          item,
          state.ProductList,
          {},
          state.GiftList,
          {},
          { WorkTaskID: state.WorktaskInfo.WorkTaskID }
        )
      }
      const doAssignTaskList = (row) => {
        // const item = state.AssignOrderBtns.find(
        //   (itm) => itm.AssignOrderSetID === row.AssignOrderSetID
        // )
        const item = row.AssignOrderSet

        if (state.TaskSetState == 2) {
          state.assignRef.showEdit(
            state.OrderID,
            item,
            state.ProductList,
            row,
            state.GiftList,
            {},
            { WorkTaskID: state.WorktaskInfo.WorkTaskID }
          )
        } else {
          ElMessage({
            message: '请先完成约定任务设置',
            type: 'warning',
          })
        }
      }
      const getAssignOrderBtn = async () => {
        state.listLoading = true
        // const loginUser = JSON.parse(localStorage.getItem('userInfo'))
        // console.log('loginUser.StaffPostID', JSON.parse(loginUser.StaffPostID))
        // const StaffPostIDs = JSON.parse(loginUser.StaffPostID)

        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        const actstaffpost = JSON.parse(userInfo.StaffPostID)
        const actstaffpostid = actstaffpost[0][1]
        state.actstaffpostid = actstaffpost[0][1]

        let FlowState = 7
        if (actstaffpostid == 20) {
          FlowState = 7
        } else if (actstaffpostid == 21) {
          FlowState = 8
        }
        const flow = {
          OrderID: state.OrderID,
          OrderFlowState: FlowState,
          StaffPostID: actstaffpostid,
        }
        const {
          data: { AssignOrderBtns },
        } = await getAssignOrderBtns(flow)
        state.AssignOrderBtns = AssignOrderBtns
        state.listLoading = false
      }
      onMounted(() => {
        state.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        console.log(state.userInfo, ' state.userInfo')
      })

      return {
        ...toRefs(state),
        showList,
        doAssignOrder,
        doAssignTaskList,
        TriggerUp,
        cancelTaskList,
        cancelTaskOk,
        close,
        handleRemove,
        handleAvatarSuccess,
        handlePictureCardPreview,
      }
    },
  })
</script>
